<template>
    <div class="app-container">
        <div class="chart-wrapper">
            <div>
                <VChart :option="options" @click="handleChartClick" />
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';

import VChart from "vue-echarts";
import {use} from "echarts";
import {GridComponent} from "echarts/components";
import {LineChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {UniversalTransition} from "echarts/features";
import useSettingsStore from "@/store/modules/settings.js";
// import {getSendPoliceTrendOfSendPolice} from "@/api/StatisticAnalysis/CityResumptionChart.js";

use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
const settingsStore = useSettingsStore();

const options = ref({});

onMounted(() => {
    // getData()
    nextTick(() => {
        setChartsData(
        ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        [60, 67,58,51,68, 73, 62,81,84, 89, 81,83]
    )
    });
    
})

// 获取数据
const getData = async () => {

    const res = await getSendPoliceTrendOfSendPolice();

    setChartsData(
        ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
        [60, 67,58,51,68, 73, 62,81,84, 89, 81,83]
    )
}
const handleChartClick = (params) => {
    if (params.componentType === 'series') {
        alert('需要刷新页面');
    }
}

// 设置图表数据
const setChartsData = (xData, thisYear, lastYear) => {
    var abc = "3本"
    options.value = {
        title: {
            text: '借阅趋势图',
            subtext:'合计：' + abc,
            left: 'center',
            top: 0,
            right: 0,
            bottom: 0
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            left: 30,
            right: 30,
            top: 80,
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: xData,
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '今年',
                data: thisYear,
                type: 'line',
                smooth: true,
            },
        ]
    }
}
</script>
<style scoped lang="scss">
.app-container {
    height: calc(100vh - 114px);
    padding-bottom: 20px;
}

.chart-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    height:100%;
    gap: 20px;

    > div {
        position: relative;
        overflow: hidden;
    }
}
</style>